<template>
    <div class="header">
        <div class="wrap">
            <div class="nav-left">
                <RouterLink to="/recommend">
                    <img src="../../assets/logo.png" />
                </RouterLink>
                <RouterLink
                    to="/recommend"
                    class="item"
                    @click="activeIndex = 1"
                    :class="{ active: activeIndex == 1 }"
                    >资源</RouterLink
                >
                <router-link
                    to="/discovery"
                    class="item"
                    @click="activeIndex = 2"
                    :class="{ active: activeIndex == 2 }"
                    >课程</router-link
                >
                <div
                    class="item"
                    @click="toPath(3, '/training')"
                    :class="{ active: activeIndex == 3 }"
                >
                    练习室
                </div>
                <div
                    class="item"
                    @click="toPath(4, '/communication')"
                    :class="{ active: activeIndex == 4 }"
                >
                    交流
                </div>
                <div
                    to="/center"
                    class="item"
                    @click="toPath(5, '/center')"
                    :class="{ active: activeIndex == 5 }"
                >
                    我的
                </div>
            </div>
            <div class="nav-right">
                <div class="down">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    下载APP
                </div>
                <button class="btn">+ 发布</button>
                <div class="avatar">
                    <img
                        @mousemove="imgMove = true"
                        @mouseleave="imgMove = false"
                        v-if="token"
                        src="../../assets/images/default_avatar.png"
                    />
                    <div class="login" @click="toLogin" v-else>登录</div>
                    <button
                        @mousemove="imgMove = true"
                        @mouseleave="imgMove = false"
                        class="logout"
                        :class="{ move: imgMove }"
                        @click="logout"
                    >
                        退出登录
                    </button>
                </div>
            </div>
        </div>
        <!-- 登录弹出框 -->
        <el-dialog
            v-model="centerDialogVisible"
            width="30%"
            center
            style="height: 450px"
        >
            <span>
                <div class="loginform">
                    <ul class="tab clearFix">
                        <li>
                            <a href="javascript:;" style="border-right: 0"
                                >扫描登录</a
                            >
                        </li>
                        <li>
                            <a href="javascript:;" class="current">账户登录</a>
                        </li>
                    </ul>

                    <div class="content">
                        <form action="javascript:;">
                            <div class="input-text clearFix">
                                <span></span>
                                <input
                                    v-model="formData.phone"
                                    type="text"
                                    placeholder="邮箱/用户名/手机号"
                                />
                            </div>
                            <div class="input-text clearFix">
                                <span class="pwd"></span>
                                <input
                                    v-model="formData.password"
                                    type="text"
                                    placeholder="请输入密码"
                                />
                            </div>
                            <div class="setting clearFix">
                                <label class="checkbox inline">
                                    <input
                                        name="m1"
                                        type="checkbox"
                                        value="2"
                                    />
                                    自动登录
                                </label>
                                <span class="forget">忘记密码？</span>
                            </div>
                            <button class="btn" @click="login">
                                登&nbsp;&nbsp;录
                            </button>
                        </form>

                        <div class="call clearFix">
                            <div class="register" @click="toRegister">
                                立即注册
                            </div>
                        </div>
                    </div>
                </div>
            </span>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import Pubsub from "pubsub-js";
import { useRouter, useRoute } from "vue-router";
import useLoginStore from "@/store/login";
import { LoginModel } from "@/api/login";
const loginStore = useLoginStore();
const router = useRouter();
const route = useRoute();
const activeIndex = ref(1);

watch(
    () => route.path,
    (nval, oval) => {
        if (nval.includes("/recommend")) {
            activeIndex.value = 1;
        } else if (nval.includes("/discovery")) {
            activeIndex.value = 2;
        } else if (nval.includes("/training")) {
            activeIndex.value = 3;
        } else if (nval.includes("/communication")) {
            activeIndex.value = 4;
        } else if (nval.includes("/center")) {
            activeIndex.value = 5;
        }
    }
);
//去注册
const toRegister = () => {
    centerDialogVisible.value = false;
    router.push("/register");
};

//退出登录
const imgMove = ref(false);
const logout=async()=>{
    try {
        await loginStore.reset();
        //退出登录后刷新页面
        window.location.reload();
    } catch (error) {
        console.error(error);
    }
};

//登录弹框
const centerDialogVisible = ref(false)
const formData = ref<LoginModel>({
    phone: '13700000000',
    // phone: "18155555555",
    password: '111111',
})
//登录持久化
const token = ref(localStorage.getItem('ACCESS_TOKEN_ZWW_2') || '')
//登录
const login = async () => {
    try {
        await loginStore.login(formData.value)
        router.replace('/')
        activeIndex.value = 1
    } catch (error) {
        console.error(error)
    }
    centerDialogVisible.value = false
    token.value = localStorage.getItem('ACCESS_TOKEN_ZWW_2') as string
}

//点击练习室  交流  我的  等页面  进行登录验证
const toPath = (num: number, path: string) => {
    //判断是否登录
    if (!token.value) {
        centerDialogVisible.value = true
        return
    }
    //已经登录  则直接跳转到该页面
    router.push(path)
    activeIndex.value = num
}
//点击登录按钮
const toLogin = () => {
    //判断是否登录
    if (!token.value) {
        centerDialogVisible.value = true
        return
    }
};
//注册成功跳转回来  显示登录框
onMounted(() => {
    Pubsub.subscribe("LOGIN", (type, msg) => {
        if (msg == "ok") {
            centerDialogVisible.value = true;
        }
    });
});
</script>

<style lang="less" scoped>
.header {
    width: 100%;
    height: 60px;
    box-shadow: 0 0 10px 5px #ddd;
    .wrap {
        width: 1200px;
        height: 60px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .nav-left {
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            img {
                cursor: pointer;
                width: 128px;
                height: 30px;
                line-height: 60px;
            }
            .item {
                cursor: pointer;
                width: 56px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                margin-left: 40px;
                font-size: 18px;

                &.active {
                    color: #f93684;
                }
            }
        }
        .nav-right {
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .down {
                font-size: 16px;
                cursor: pointer;
            }
            .btn {
                width: 75px;
                height: 30px;
                background-color: #f93684;
                border-radius: 15px;
                color: #fff;
                font-size: 16px;
                padding: 0;
                margin: 0 28px 0 30px;
                border: none;
                cursor: pointer;
            }
            .avatar {
                width: 30px;
                height: 30px;
                cursor: pointer;
                position: relative;
                a:hover {
                    color: #000;
                }
                .login {
                    font-size: 15px;
                    line-height: 30px;
                }
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
                .logout {
                    width: 140px;
                    height: 0px;
                    background-color: #fff;
                    cursor: pointer;
                    border-radius: 5px;
                    border: none;
                    font-size: 14px;
                    box-shadow: 1px 1px 2px #aaa;
                    position: absolute;
                    // margin-top: 30px;
                    top: 30px;
                    right: 0;
                    transition: all 0.2s;
                    opacity: 0;
                    display: none;
                    &.move {
                        display: block;
                        height: 45px;
                        opacity: 1;
                    }
                    &:hover{
                        background-color: #e3e3e3;
                    }
                }
            }
        }
    }
    .loginform {
        width: 420px;
        height: 350px;
        box-sizing: border-box;
        background: #fff;
        float: right;
        position: relative;
        padding: 20px;

        .tab {
            li {
                width: 50%;
                float: left;
                text-align: center;

                a {
                    width: 100%;
                    display: block;
                    height: 50px;
                    line-height: 50px;
                    font-size: 20px;
                    font-weight: 700;
                    color: #333;
                    border: 1px solid #ddd;
                    box-sizing: border-box;
                    text-decoration: none;
                }

                .current {
                    border-bottom: none;
                    border-top-color: #f936bb;
                    color: #e1251b;
                }
            }
        }

        .content {
            width: 380px;
            height: 280px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-top: none;
            padding: 18px;

            form {
                margin: 15px 0 18px 0;
                font-size: 12px;
                line-height: 18px;

                .input-text {
                    margin-bottom: 16px;

                    span {
                        float: left;
                        width: 37px;
                        height: 32px;
                        border: 1px solid #ccc;
                        background: url(../../assets/images/icons.png) no-repeat -10px -201px;
                        box-sizing: border-box;
                        border-radius: 2px 0 0 2px;
                    }

                    .pwd {
                        background-position: -72px -201px;
                    }

                    input {
                        width: 302px;
                        height: 32px;
                        box-sizing: border-box;
                        border: 1px solid #ccc;
                        border-left: none;
                        float: left;
                        padding-top: 6px;
                        padding-bottom: 6px;
                        font-size: 14px;
                        line-height: 22px;
                        padding-right: 8px;
                        padding-left: 8px;

                        border-radius: 0 2px 2px 0;
                        outline: none;
                    }
                }

                .setting {
                    label {
                        float: left;
                    }

                    .forget {
                        float: right;
                    }
                }

                .btn {
                    background-color: #e1251b;
                    padding: 6px;
                    border-radius: 0;
                    font-size: 16px;
                    font-family: 微软雅黑;
                    word-spacing: 4px;
                    border: 1px solid #e1251b;
                    color: #fff;
                    width: 100%;
                    height: 36px;
                    margin-top: 25px;
                    outline: none;
                }
            }

            .call {
                margin-top: 10px;

                ul {
                    float: left;

                    li {
                        float: left;
                        margin-right: 5px;
                    }
                }

                .register {
                    float: right;
                    cursor: pointer;
                    font-size: 15px;
                    line-height: 38px;
                }

                .register:hover {
                    color: #f936bb;
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>
